const n = `<!--
 * @Author: Quarter
 * @Date: 2024-07-18 19:34:17
 * @LastEditors: Quarter
 * @LastEditTime: 2024-07-25 11:31:11
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/pagination/default-pagination.vue
 * @Description: 默认示例
-->
<template>
  <s-form label-width="12em" colon="：">
    <s-form-item label="是否显示总数">
      <s-switch v-model="options.counter"></s-switch>
    </s-form-item>
    <s-form-item label="是否显示分页大小">
      <s-switch v-model="options.resizer"></s-switch>
    </s-form-item>
    <s-form-item label="是否显示页码跳转">
      <s-switch v-model="options.jumper"></s-switch>
    </s-form-item>
    <s-form-item label="是否扁平显示">
      <s-switch v-model="options.plain"></s-switch>
    </s-form-item>
    <s-form-item label="显示模式">
      <s-radio-group v-model="options.type" :options="typeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="显示排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="分页示例">
      <s-pagination
        :page="options.page"
        :size="10"
        :total="156"
        :counter="options.counter"
        :resizer="options.resizer"
        :jumper="options.jumper"
        :plain="options.plain"
        :type="options.type"
        :align="options.align"
      ></s-pagination>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  PAGINATION_ALIGN_DEFAULT,
  PAGINATION_ALIGN_LABEL,
  PAGINATION_ALIGN_OPTIONS,
  PAGINATION_TYPE_DEFAULT,
  PAGINATION_TYPE_LABEL,
  PAGINATION_TYPE_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultPagination extends Vue {
  /**
   * @description: 类型可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly typeList = PAGINATION_TYPE_OPTIONS.map((variant) => ({
    value: variant,
    label: PAGINATION_TYPE_LABEL.get(variant),
  }));

  /**
   * @description: 排列方向可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = PAGINATION_ALIGN_OPTIONS.map((variant) => ({
    value: variant,
    label: PAGINATION_ALIGN_LABEL.get(variant),
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    page: 2,
    counter: true, // 是否显示计数器
    resizer: true, // 是否显示分页大小调整
    jumper: true, // 是否显示页面跳转
    plain: false, // 是否纯文本
    type: PAGINATION_TYPE_DEFAULT, // 分页类型
    align: PAGINATION_ALIGN_DEFAULT, // 分页对齐方式
  };
}
<\/script>
`; export { n as default };
